---
title: Scatter Chart
---

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.

import { useEffect, useRef } from 'react';

```jsx live
function example() {
  const canvas = useRef(null);
  useEffect(() => {
    const cfg = {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: [{
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }, {
                    x: 0.5,
                    y: 5.5
                }],
                backgroundColor: 'rgb(255, 99, 132)'
            }],
        },
        options: {
            scales: {
                x: {
                    type: 'linear',
                    position: 'bottom'
                }
            }
        }
    };
    const chart = new Chart(canvas.current.getContext('2d'), cfg);
    return () => chart.destroy();
  });
  return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
}
```

## Dataset Properties

The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).

## Data Structure

Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.

```javascript
data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]
```

## Internal data format

`{x, y}`
